<template>
	<view>
		<u-form :model="model" :rules="rules" ref="form" labelPosition="top" labelWidth="auto" :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px',
      }">
			<view class="basic-style">
				<view class="basic-title basic-border">基本信息</view>
				<u-form-item label="单据编号" prop="billNo" required>
					<u--input v-model="model.billNo" disabled></u--input>
				</u-form-item>
				<u-form-item label="申请人" prop="propose" required>
					<h-select-person-input style="width: 100%" disabled v-model="model.proposer" placeholder="请选择申请人"
						border="surround" suffixIcon="arrow-down-fill" :suffixIconStyle="{ color: '#B2B2B2' }"
						objectField="model.proposer"></h-select-person-input>
				</u-form-item>
				<u-form-item label="申请时间" required>
					<u--input v-model="model.createTime" disabled></u--input>
				</u-form-item>
				<u-form-item label="申请部门" prop="proposerDeptId" required>
					<h-select-depart-input disabled v-model="model.proposerDeptId" :departName="model.proposerDeptText"
						placeholder="请选择申请部门" border="surround" style="width: 100%" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						:title.sync="model.proposerDeptText"></h-select-depart-input>
				</u-form-item>
				<u-form-item label="申请公司" prop="companyId" required>
					<h-select-company-input style="width: 100%" v-model="model.companyId" border="surround"
						placeholder="请选择申请公司" suffixIcon="arrow-down-fill" :suffixIconStyle="{ color: '#B2B2B2' }"
						objectField="model.companyId"></h-select-company-input>
				</u-form-item>
				<u-form-item label="提现金额（元）" prop="amount" required>
					<h-money-input placeholder="请输入提现金额" v-model="model.amount"></h-money-input>
				</u-form-item>
				<u-form-item label="申请事由" prop="cause" required>
					<u--textarea :confirm-type="null" maxlength="20" count placeholder="请输入申请事由"
						v-model="model.cause"></u--textarea>
				</u-form-item>
				<u-form-item label="备注" prop="remark">
					<u--textarea :confirm-type="null" maxlength="500" count placeholder="请输入备注"
						v-model="model.remark"></u--textarea>
				</u-form-item>
			</view>

			<view class="basic-style">
				<view class="basic-title basic-border">附件信息</view>
				<view class="py-1 space-y-1" style="width: 100%">
					<view style="color: red">提示：请等待附件上传完成，再点击保存，否则附件无法保存成功！</view>
					<h-upload-file v-model="model.attachments" :isIcon="false"></h-upload-file>
					<file-list v-if="model.attachments" v-model="model.attachments" :isDelete="true"></file-list>
				</view>
			</view>
		  <view class="space-x-1 px-1 btn_position">
			<u-button :disabled="isSubmit" type="primary" :plain="true" text="保存" @click="onDraft"></u-button>
			<u-button :disabled="isSubmit"  type="primary"  text="保存并提交" @click="onSubmit"></u-button>
		  </view>
		  <view style="height: 100rpx;"></view>
		</u-form>
		<u-toast ref="uToast"></u-toast>
		<ProcessNodeConfiguration ref="processConfig" @ok="onOk"></ProcessNodeConfiguration>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import moment from 'moment'
	import {
		gainBillNo,
		add,
		edit,
		info,
	} from '@/api/finance/ErpWithdrawMoneyForm'
	import fileList from '@/pages/synergy/components/fileList.vue'
	import ProcessNodeConfiguration from '@/components/ProcessNodeConfiguration/ProcessNodeConfiguration.vue' // 流程节点配置人员选择弹窗
	export default {
		name: 'ErpWithdrawMoneyForm',
		components: {
			fileList,
			ProcessNodeConfiguration
		},
		data() {
			return {
				isSubmit: false,
				index: null,
				loading: false,
				id: '',
				model: {
					// 基本信息 - 公用
					bpmBizTitle: '',
					billNo: '',
					proposer: '',
					proposerDeptId: '',
					createTime: '',
					companyId: '',
					amount: '',
					cause: '',
					remark: '',
					// 附件
					attachments: null,
				},
				formData: [],
				rules: {
					billNo: [{
						required: true,
						message: '请输入单据编号!',
						trigger: ['blur', 'change']
					}],
					proposerDeptId: [{
						required: true,
						message: '请选择申请部门!',
						trigger: ['blur', 'change']
					}],
					proposer: [{
						required: true,
						message: '请选择申请人!',
						trigger: ['blur', 'change']
					}],
					createTime: [{
						required: true,
						message: '请选择申请时间!',
						trigger: ['blur', 'change']
					}],
					companyId: [{
						required: true,
						message: '请选择申请公司',
						trigger: ['blur', 'change']
					}],
					cause: [{
						required: true,
						message: '请输入申请事由!',
						trigger: ['blur', 'change']
					}],
					amount: [
						{
							required: true,
							message: '请输入提现金额!',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							pattern: /^(?!0\.00)(?!0$)([1-9]\d*|0)(\.\d{2})?$/,
							message: '请输入正确的提现金额!',
							trigger: ['blur', 'change']
						},
					],
				},
				beanName: 'erpWithdrawMoneyServiceImpl',
				flowCode: 'onl_erp_withdraw_money',
				formUrl: "erp/finance/withdrawMoney/modules/ErpWithdrawMoneyForm",
				formUrlMobile: "/pages/synergy/erpWithdrawMoneyList",
			}
		},
		onLoad({
			id
		}) {
			this.id = id || ''
		},
		created() {
			if (this.id) {
				this.initInfo()
			} else {
				this.initForm()
				this.initBillNo()
			}
		},
		computed: {
			...mapState(['userInfo']),
			formTotal() {
				return this.formData.reduce((total, item) => total + Number(item.amount), 0).toFixed(2)
			},
		},
		methods: {
			// 获取单据编号
			async initBillNo() {
				const res = await gainBillNo({
					proposer: this.userInfo.empId
				})
				this.model.billNo = res.result
				this.model.bpmBizTitle = this.userInfo?.employee?.name + '-' + this.model.billNo //标题
			},
			// 初始化新增需要的数据
			initForm() {
				this.model.proposer = this.userInfo.empId //当前登录人
				this.model.proposerDeptId = this.userInfo.deptId //当前登录人部门
				this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss')
			},
			async initInfo() {
			  const response = await info({ id: this.id })
			  const data = response?.result || {}
			  this.model = Object.assign({}, data)
			},
			validateForm() {
				return this.$refs.form.validate()
			},
			async onSubmit() {
				await this.validateForm()
				this.isSubmit = true
				try {
					this.loading = true
					var url = ''
					if (this.id) {
						url = edit
					} else {
						url = add
					}
					const response = await url({
						...this.model,
						// slipDetailList: this.formData,
					})
					if (response.success) {
						this.isSubmit = true
						if (this.id) {
							await this.getProcessList(this.id)
						} else {
							// 判断添加的时候是否有返回id值
							if (response.result) {
								await this.getProcessList(response.result)
							}
						}
						this.$refs.uToast.show({
							message: response.message,
							type: 'default',
							complete() {
								// that.isSubmit = false
							},
						})
					}
				} finally {
					this.loading = false
				}
			},
			async onDraft() {
				// await this.validateForm()
				this.isSubmit = true
				try {
					this.loading = true
					var url = ''
					if (this.id) {
						url = edit
					} else {
						url = add
					}
					const response = await url({
						...this.model,
						// slipDetailList: this.formData,
					})
					if (response.success) {
						this.$refs.uToast.show({
							message: response.message,
							type: 'default',
							complete() {
								this.isSubmit = false
								if (getCurrentPages().length > 1) {
									uni.navigateBack()
								} else {
									uni.reLaunch({
										url: '/pages/home/home'
									})
								}

							}
						})
					}
				} finally {
					this.loading = false
				}
			},
			// 获取流程列表
			getProcessList(id) {
				if (this.isSubmit) {
					this.$refs.processConfig.showPopup = true
					this.$refs.processConfig.formUrl = this.formUrl
					this.$refs.processConfig.formUrlMobile = this.formUrlMobile
					this.$refs.processConfig.flowCode = this.flowCode
					this.$refs.processConfig.edit(id, this.processId, this.beanName)
				}
			},
			// 提交流程成功
			onOk() {
				this.$refs.uToast.show({
					message: '提交成功',
					type: 'success',
					complete() {
						if (getCurrentPages().length > 1) {
							uni.navigateBack()
						} else {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/assets/inputStyle.scss');
	.trip-form-data {
		::v-deep {
			.u-form-item__body {
				padding-top: 2px;
				padding-bottom: 2px;
			}
		}
	}

	.checkbox-item {
		display: flex;
		align-items: center;
	}
</style>